<template>
  <div class="body-box">
    <window-title title="条件筛选"></window-title>
    <el-form size="mini" :inline="true" style="margin-top:10px;">
      <el-form-item label="组别" v-if="type == 1">
        <el-select v-model="group_id">
          <el-option v-for="(item,key) in team_list" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单号">
        <el-input placeholder="请输入订单号查询" v-model="out_trade_no"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" class="com-btn" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <window-title title="订单列表"></window-title>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          待付款
          <span class="tab-badge">{{pay}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          待审核
          <span class="tab-badge">{{no_verify}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">
          报名成功
          <span class="tab-badge">{{success_order}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="4">
        <span slot="label">
          已拒绝
          <span class="tab-badge">{{refuse_verify}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="5">
        <span slot="label">
          已退款
          <span class="tab-badge">{{return_order}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-table size="mini" border :data="list.data" v-loading="load" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40px" :selectable="setIsSelect"></el-table-column>
      <el-table-column type="index" width="40px"></el-table-column>
      <el-table-column label="单号" min-width="150px">
        <template slot-scope="item">
          <div>{{item.row.out_trade_no}}</div>
          <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_h5.png"  v-if="item.row.source == 2" style="height:15px;margin-right:5px">
          <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_ser.png"  v-if="item.row.service_id.length > 0" style="height:15px;margin-right:5px">
          <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/order_wechat.png"  v-if="item.row.source == 1" style="height:15px;margin-right:5px">
          <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/order/team_sign.png"  v-if="item.row.source == 3" style="height:15px;margin-right:5px">
          <!-- <el-tag size="mini" v-if="item.row.source == 1">小程序</el-tag>
          <el-tag size="mini" v-if="item.row.source == 2">h5</el-tag>
          <el-tag size="mini" v-if="item.row.source == 3">团报</el-tag>
          <el-tag size="mini" type="warning" v-if="item.row.return_price > 0">部分退款</el-tag> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="头像" min-width="100px" width="50px">
        <template slot-scope="item">
          <img :src="item.row.user_info.Avatar" class="ac-order-head">
        </template>
      </el-table-column>-->
      <el-table-column label="昵称" prop="user_info.MemberName" width="60px"></el-table-column>
      <el-table-column label="手机号" prop="user_info.Phone" width="100px"></el-table-column>
      <el-table-column label="组别" width="120px">
        <template slot-scope="item">
          <el-tag type="danger" size="mini">{{item.row.team_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="费用" prop="total_price" width="60px"></el-table-column>
      <el-table-column label="时间" prop="create_time" width="150px"></el-table-column>
      <el-table-column label="状态" width="70px">
        <template slot-scope="item">
          <el-tag size="mini" type="danger" v-if="item.row.state == 1">待支付</el-tag>
          <div v-if="item.row.verify == 0 && item.row.state != 1">
            <el-tag type="primary" size="mini">待审核</el-tag>
          </div>
          <div v-if="item.row.verify == 1 && item.row.state != 1">
            <el-tag size="mini" type="warning" v-if="item.row.state == 3">已退款</el-tag>
            <template v-if="item.row.state == 2">
              <el-tag size="mini" type="success">正常</el-tag>
            </template>
            <el-tag size="mini" type="info" v-if="item.row.state == 4">已取消</el-tag>
          </div>
          <div v-if="item.row.verify == 2 && item.row.state != 1">
            <el-tag type="danger" size="mini">已拒绝</el-tag>
            <div>
              <el-tag size="mini" type="warning">已退款</el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="175px">
        <template slot-scope="item">
          <el-button size="mini" style="margin-right:10px" @click="orderDetail(item.row.id)">查看</el-button>
          <el-dropdown size="mini" split-button @command="tableSet($event,item.row.id)">
            更多
            <el-dropdown-menu slot="dropdown">
              <template v-if="item.row.verify == 0 && item.row.state == 2">
                <el-dropdown-item :command="1">
                  <el-link icon="el-icon-check">通过审核</el-link>
                </el-dropdown-item>
                <el-dropdown-item :command="2">
                  <el-link icon="el-icon-close">拒绝审核</el-link>
                </el-dropdown-item>
              </template>
              <template v-if="item.row.verify == 1 && item.row.state == 2 && item.row.active_type != 3 && now_time < item.row.ac_start_time * 1000">
                <el-dropdown-item :command="3">
                  <el-link icon="el-icon-refresh-right">订单退款</el-link>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <div style="float:left">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="totalSet(1)" :disabled="order_id_arr.length > 0 ? false : true">批量同意</el-button>
        <el-button size="mini" type="danger" icon="el-icon-close" @click="totalSet(2)" :disabled="order_id_arr.length > 0 ? false : true">批量拒绝</el-button>
      </div>
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 订单详情 -->
    <el-dialog :visible.sync="order_model" width="800px" title="订单详情" :append-to-body="true">
      <order-detail :order_id = "order_id"></order-detail>
    </el-dialog>
  </div> 
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import orderDetail from './order-detail.vue';

export default {
  components: { windowTitle , orderDetail },
  props: { active_id: {},type:{} },
  data() {
    return {
      activeName: "0",
      list: {
        current_page: 1,
        data: []
      },
      team_list : [],
      load: true,
      all: 0,
      no_verify: 0,
      pay: 0,
      success_order: 0,
      refuse_verify: 0,
      return_order: 0,
      order_id_arr : [],
      order_model : false,
      order_id : 0,
      group_id : 0,
      out_trade_no : '',
      now_time : Date.parse(new Date())
    };
  },
  mounted() {
    this.getData();
    this.getTeamInfo();
  },
  methods: {
    //搜索
    search(){
      this.list.current_page = 1;
      this.getData();
    },
    //获取活动组别信息
    getTeamInfo(){
      this.ajaxs('active/getTeamInfo',{
        data:{active_id : this.active_id},
        success:(res) => {
          this.team_list = res.msg;
          this.team_list.unshift({name : '全部' , 'id' : 0});
        }
      });
    },
    //订单详情
    orderDetail(id){
      this.order_model = true;
      this.order_id = id;
    },
    //批量操作
    totalSet(param){
      param == 1 ? this.agree(this.order_id_arr) : this.refuse(this.order_id_arr);
    },
    //批量选择
    handleSelectionChange(e){
      this.order_id_arr = [];
      for(var i in e) {
        this.order_id_arr.push(e[i].id);
      }
    },
    //判断表格单行是否可以被选中
    setIsSelect(row, index) {
      if (this.list.data[index].verify != 0 || this.list.data[index].state != 2) return false;
      return true;
    },
    //订单操作
    tableSet(e,id) {
      if(e == 1) this.agree(id);
      if(e == 2) this.refuse(id);
      if(e == 3) this.orderReturn(id);
    },
    //订单退款
    orderReturn(id){
      this.$confirm("确定标记退款?退款后付款金额会原路返回", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("active/orderReturn", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    },
    //订单同意
    agree(id) {
      this.$confirm("确定同意审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("active/agreeOrderVerify", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    },
    //拒绝订单
    refuse(id) {
      this.$confirm("确定拒绝审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("active/refuseOrderVerify", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    },
    //获取订单列表
    getData() {
      this.load = true;
      this.ajaxs("active/activeOrder", {
        data: { active_id: this.active_id, state: this.activeName ,group_id : this.group_id , out_trade_no : this.out_trade_no},
        success: res => {
          this.list = res.msg.list;
          this.load = false;
          this.all = res.msg.all;
          this.no_verify = res.msg.no_verify;
          this.pay = res.msg.pay;
          this.success_order = res.msg.success_order;
          this.refuse_verify = res.msg.refuse_verify;
          this.return_order = res.msg.return_order;
          console.log(this.list);
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    //切换tab
    handleClick() {
      this.list.current_page = 1;
      this.getData();
    }
  }
};
</script>

<style>
.ac-order-no {
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
}
.ac-order-cover {
  width: 160px;
  height: 90px;
  border-radius: 5px;
}
.ac-order-info {
  display: inline-block;
  width: calc(100% - 180px);
  height: 90px;
  margin-left: 20px;
  background: #f8f8f8;
  float: right;
}
.ac-order-head {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border-radius: 50%;
}
</style>